<template>
	<div class="home-Head">
		<div class="head-p">
			首页
		</div>
		<div class="home-content">
			<el-row :gutter="30">
				<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8"><div class="big">
					<div class="content-base1">
						<p class="base-p1">{{userCount}}</p>
						<p class="base-p2">
							<i class="el-icon-user-solid"></i>
							用户总数
						</p>
					</div>
				</div></el-col>
				<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8"><div class="big">
					<div class="content-base2">
						<p class="base-p1">{{productCount}}</p>
						<p class="base-p2">
							<i class="el-icon-s-unfold"></i>
							商品总数
						</p>
					</div>
				</div></el-col>
				<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8"><div class="big">
					<div class="content-base3">
						<p class="base-p1">{{orderCount}}</p>
						<p class="base-p2">
							<i class="el-icon-success"></i>
							订单总数
						</p>
					</div>
				</div></el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import axios from "axios"
	export default {
		name: "Head",
		data(){
			return{
				userCount:"",
				productCount:"",
				orderCount:"",
				amount: 25,
				buffer: 40,
				selectedDate: null
			}
		},

		methods:{
			base(){
				axios.get("/api/statistic/base_count.do").then((res)=>{
					this.userCount=res.data.data.userCount;
					this.productCount=res.data.data.productCount;
					this.orderCount=res.data.data.orderCount;
				})
			},

		},
		mounted() {
			this.base()
		}
	}
</script>

<style lang="scss" scoped>
	.md-progress-bar {
		margin: 24px;
	}
	.home-Head{
		width: 100%;
		.head-p{
			font-size: 30px;
			margin-left: 40px;
			margin-top: 10px;
		}
		.home-content{
			width: 100%;
			height: 200px;
			margin-left: 40px;
			margin-top: 40px;
			.big{
				transition: all 0.5s;
			}
			.big:hover{
				opacity: 1;;
				color: #333;
				transform: scale(1.1);
				-webkit-transform: scale(1.1);
				-moz-transform: scale(1.1);
				-o-transform: scale(1.1);
				-ms-transform: scale(1.1);
			}
			.content-base1{
				float: left;
				width: 300px;
				height: 150px;
				background-color: orange;
				.base-p1{
					text-align: center;
					color: white;
					font-size: 24px;
					margin-top: 30px;
				}
				.base-p2{
					text-align: center;
					color: white;
					font-size: 24px;
					margin-top: 10px;
				}
			}
			.content-base2{
				float: left;
				width: 300px;
				height: 150px;
				background-color: green;
				.base-p1{
					text-align: center;
					color: white;
					font-size: 24px;
					margin-top: 30px;
				}
				.base-p2{

					text-align: center;
					color: white;
					font-size: 24px;
					margin-top: 10px;
				}
			}
			.content-base3{
				float: left;
				width: 300px;
				height: 150px;
				background-color: dodgerblue;
				.base-p1{
					text-align: center;
					color: white;
					font-size: 24px;
					margin-top: 30px;
				}
				.base-p2{
					text-align: center;
					color: white;
					font-size: 24px;
					margin-top: 10px;
				}
			}
		}
	}
</style>
